<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation];
const images = [

    "http://api.ddhk.net/storage/images/13/agency_distribution_box/20250912091746754650.jpg",
    "http://api.ddhk.net/storage/images/13/agency_distribution_box/20250912091749742807.jpg",
    "http://api.ddhk.net/storage/images/13/agency_distribution_box/20250912091751274422.jpg",
    "http://api.ddhk.net/storage/images/13/agency_distribution_box/20250912091754842542.jpg"

];

</script>
<template>
    <div class="container banner__wrapper">
        

    </div>

    <div class="container">

        <div class="head-txt-img">

            <div class="head-txt">
                <div class="banner__upper">
            <span class="banner__label">Agency Products</span>
            <h1 class="banner__title">Distribution Box</h1>
        </div>
                <p>
                    Based on the product prototype of the top plastic distribution box from the
                    German Gustav Hensel Company in the industry, this plastic box is locally
                    produced in China. It features a high protection level, excellent anti-corrosion
                    performance, high safety, and the advantages of modularization, splicing,
                    expandability, and flexible use.
                </p>
            </div>
            <div class="img">
                <img src="http://api.ddhk.net/storage/images/13/agency_distribution_box/20250912092045198226.jpg" alt="">
            </div>
        </div>

    </div>

    <div class="container">

        <div class="tubiao">
            <div class="item">
                <img src="/src/assets/img/agency/icon-02.png" alt="">
            </div>
            <div class="item">
                <img src="/src/assets/img/agency/icon-03.png" alt="">
            </div>
            <div class="item">
                <img src="/src/assets/img/agency/icon-04.png" alt="">
            </div>
            <div class="item">
                <img src="/src/assets/img/agency/icon-05.png" alt="">
            </div>
        </div>

        <div class="zhibiao">
            <table>
                <tr class="head">
                    <td>Withstand The
                        Impacts Of
                        Climate Change</td>
                    <td>Resistant To UV
                        Ultraviolet Aging</td>
                    <td>Resistant To Salt
                        Spray Erosion</td>
                    <td>Chemical
                        Resistance
                        Property</td>
                </tr>
                <tr class="con">
                    <td>· Effectively resist the erosion of water vapor, rain,
                        snow and frost <br>
                        · A single box can be used in an environment ranging
                        from -40℃ to 110℃<br>
                        · In various harsh environments, the structural and
                        chemical properties of the box will not change</td>
                    <td>· The material of the box body has extremely high
                        resistance to ultraviolet aging<br>
                        · The material properties remain stable in an
                        environment exposed to ultraviolet rays and will not
                        become brittle or deformed<br>
                        · Suitable for use in outdoor environments exposed to
                        direct sunlight(such as photovoltaic power stations)<br>
                        · It can be used outdoors for 25 years</td>
                    <td>· It is suitable for application in coastal areas and salt
                        mine sites<br>
                        · Effectively prevent corrosion caused by salt spray<br>
                        · Protect all kinds of components inside the box and
                        extend their service life</td>
                    <td>· It effectively resists corrosion from 10% acid, 10%
                        alkali, gasoline, mineral oil, heavy oil and benzene<br>
                        · It effectively resists corrosion from water vapor, rain
                        and snow<br>
                        · Protect all kinds of components inside the box</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="container lunbo">
        <!-- 这里轮播图 -->
        <Swiper :loop="true">

            <SwiperSlide v-for="(item, index) in images" :key="index">

                <img :src="item" class="slide-image" alt="轮播图" />

            </SwiperSlide>


            <!-- <SwiperSlide>

    <img src="/src/assets/img/home/lunbo/lunbo1_1500x600.jpg" class="slide-image" alt="轮播图" />

</SwiperSlide> -->

        </Swiper>

    </div>

    <div class="container features">

        <h3>Product Features</h3>
        <p>
            · IP65, dustproof; <br>
            · It can be used in environments with conductive dust and dirty electricity, and is flame-retardant
            and self-extinguishing;<br>
            · Effectively protect various components inside the box and extend their service life;<br>
            · IP6X dust-proof;<br>
            · IP65, waterproof;<br>
            · Protect all kinds of components inside the box and extend their service life;<br>
            · IPX5, water-resistant. Water can be sprayed vigorously in all directions of the casing without any
            harmful effects;<br>
            · When cleaning the box body, it can be washed with a water gun (≥0.15 meters, 100bar).
        </p>
    </div>
</template>    

<style lang="less">
.head-txt-img {

    display: flex;
    flex-direction: row;
    align-items: center;

    border-bottom: solid 20px #004d7b;

    .head-txt {}

    .img {

        // width:400%;
        img {
            max-width: 550px;
        }

    }
}

.tubiao{
    margin-top:5rem;
    display: flex;

    .item{
        width:25%;
        text-align: center;
        img{

            max-width:80px;

            width:100%;
        }
    }
}
.zhibiao {
    margin-top:1rem!important;
    table{

        tr{

            td{
                width:25%;
            }
        }
    }
    .con {
        font-size: 14px;
        line-height: 1.5;
    }


    .head {

        background-color: #004d7b;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 1.5;
    }

}

.features {

    h3 {
        border-bottom: solid 1px;
        line-height: 3;
        font-size: 2.2rem;
        margin-bottom: 0;
    }

    p {
        line-height: 1.5;
    }
}
</style>

<style>
.swiper{
    
    width:800px;
    max-width:100%;
    height: 400px;
    margin: 50px auto;

}
.slide-image {

width: 100%;
height: 100%;
object-fit: cover;
/*图片自适应容器，保持比例*/

}
</style>